<template>
  <div class="shop-list">
    <div>
      <el-form>
        <el-form-item label="商户号："><el-input placeholder="请输入商户号" v-model="searchForm.phone" size="small" clearable></el-input></el-form-item>
        <el-form-item label="店铺名称："><el-input placeholder="请输入店铺名称" v-model="searchForm.name" size="small" clearable></el-input></el-form-item>
        <el-form-item label="平台类型：">
          <el-select v-model="searchForm.type" placeholder="请选择类型" size="small">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(item, index) in platformTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item><el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button></el-form-item>
      </el-form>
    </div>
    <div>
      、
      <el-table :data="tableData" border>
        <el-table-column prop="merchant_phone" label="商户账号"></el-table-column>
        <el-table-column prop="type_name" label="平台类型"></el-table-column>
        <el-table-column prop="name" label="店铺名称"></el-table-column>
        <el-table-column prop="shop_url" label="店铺网址">
          <div slot-scope="scope"><div class="look-btn" @click="toExternalUrl(scope.row.shop_url)" v-if="scope.row.shop_url">查看</div></div>
        </el-table-column>
        、
        <el-table-column prop="bind_status" label="是否授权" :formatter="getBindStaus"></el-table-column>
        <el-table-column prop="bind_channel" label="授权渠道"></el-table-column>
        <el-table-column prop="bind_time" label="授权时间"></el-table-column>
      </el-table>
      <!-- <div class="export-box">
             <el-button class="export-btn" @click="exportExcel">导出</el-button>
           </div> -->
      <div class="block" style="margin: 20px 0px; text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[10, 15, 20, 25, 50]"
          :page-size="searchForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { apiGetPromoterShopList } from '../../request/api';
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        token: window.sessionStorage.getItem('token'),
        phone: '',
        type: '',
        name: '',
        page: 1,
        limit: 10
      },
      storeType: [
        {
          label: '淘宝',
          value: 1
        },
        {
          label: '天猫',
          value: 2
        },
        {
          label: '京东',
          value: 3
        },
        {
          label: '1688',
          value: 4
        },
        {
          label: '唯品会',
          value: 13
        },
        {
          label: '拼多多',
          value: 15
        },
        {
          label: '抖音',
          value: 20
        }
      ],
      pageTotal: 0,
      platformTypeList: [],
      shopTypeList: window.sessionStorage.getItem('shopTypeList')
    };
  },
  created() {
    this.getTableData();
    if (!this.shopTypeList || this.shopTypeList == null) {
      this.platformTypeList = this.storeType;
    } else {
      let shopShowTypeArr = this.shopTypeList.split(',');
      for (var i in this.storeType) {
        if (shopShowTypeArr.indexOf(this.storeType[i].value.toString()) >= 0) {
          this.platformTypeList.push(this.storeType[i]);
        }
      }
    }
  },
  methods: {
    toExternalUrl(url) {
      window.open(url, 'shopUrl');
    },
    getBindStaus(row) {
      let name = row.bind_status == 1 ? '是' : '否';
      return name;
    },
    handleSizeChange(val) {
      this.searchForm.limit = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getTableData();
    },
    getTableData() {
      this.$showLoading();
      apiGetPromoterShopList(this.searchForm)
        .then(res => {
          this.tableData = res.data;
          this.pageTotal = res.count;
          this.$hideLoading();
        })
        .catch(res => {
          this.$hideLoading();
          this.$message.error('数据加载失败');
        });
    },
    searchData() {
      this.getTableData();
    },
    exportExcel(val) {
      this.$showLoading();
      let uid = window.sessionStorage.getItem('uid');
      let downloadUrl = this.BASE_API_URL + 'baseapi/promoterBase/countDataDirectExport';
      let downloadParam =
        '?uid=' +
        uid +
        '&phone=' +
        this.searchForm.phone +
        '&shopType=' +
        this.searchForm.shopType +
        '&name=' +
        this.searchForm.name +
        '&beginTime=' +
        this.searchForm.beginTime +
        '&saleManId=' +
        this.searchForm.saleManId;
      window.location.href = downloadUrl + downloadParam;
      setTimeout(() => {
        this.$hideLoading();
        this.$message.warning('请耐心等待表格下载');
      }, 10000);
    }
  }
};
</script>
<style lang="less" scoped>
@import '../../assets/css/common.css';
.all-text {
  text-align: right;
  color: red;
  span {
    width: 12%;
    display: inline-block;
    text-align: center;
  }
}
.url-style {
  color: red;
  cursor: pointer;
  text-decoration: underline;
}
.look-btn {
  height: 28px !important;
  padding: 0px 15px !important;
  background: #ff5001;
  color: #ffffff;
  display: inline-block;
  line-height: 28px;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
}
.export-box {
  display: inline-block;
  float: left;
  margin-top: 20px;
  .export-btn {
    padding: 8px 15px;
    color: #ffffff;
    background: #0e7cee;
  }
}
</style>
